<template>
	<view class="page">
		<view class="top-box">
			<uni-nav-bar leftIcon="left" title="资料管理" statusBar :border="false" backgroundColor="#FFFFFF"
				@clickLeft="handleBack"></uni-nav-bar>
		</view>

		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="border: none;
		background: white;">
			<view v-if="!avatarUserUrl" class="unauthorized">
				<image class="avatar" src="@/static/personalCenter/ic_not_logged_in.png" mode="widthFix">
				</image>
				<text class="desc">获取头像</text>
			</view>
			<view v-else class="unauthorized">
				<image class="avatar" :src="avatarUserUrl" mode="widthFix"></image>
				<text class="desc">获取头像</text>
			</view>
		</button>
		<view style="border-radius: 20rpx;margin-top: 20rpx;">

			<wCard v-if="false" flexDirection="row" borderRadius="0" alignItems="center">
				<text class="title">昵称</text>
				<u-input v-model="nickName" type="nickname" placeholder="请输入" inputAlign="right" clearable />
			</wCard>

			<wCard flexDirection="row" marginTop="2" borderRadius="0" alignItems="center">
				<text class="title">姓名</text>
				<u-input v-model="userName" placeholder="请输入" inputAlign="right" clearable />
			</wCard>

			<wCard flexDirection="row" marginTop="2" borderRadius="0" alignItems="center">
				<text class="title">单位名称</text>
				<u-input v-model="company" placeholder="请输入" inputAlign="right" clearable />
			</wCard>

			<wCard flexDirection="row" marginTop="2" borderRadius="0" alignItems="center">
				<text class="title">职务</text>
				<u-input v-model="duty" placeholder="请输入" inputAlign="right" clearable />
			</wCard>

			<wCard flexDirection="row" marginTop="2" borderRadius="0" alignItems="center">
				<text class="title">手机号</text>
				<u-input v-model="phone" type="number" :maxlength="11" placeholder="请输入" inputAlign="right" clearable />
			</wCard>
		</view>

		<view class="h-view" @click="checkboxChange">
			<u-icon v-if="!readAndAgree" name="checkmark-circle" color="#a8a8a8" size="34" />
			<u-icon v-else name="checkmark-circle-fill" color="#2979ff" size="34" />
			<text style="margin-left: 8rpx;">我已阅读并同意</text>
			<text style="color: #2979ff;" @click.stop="toSinglePage('privacy')">《隐私保护协议》</text>
			和
			<text style="color: #2979ff;" @click.stop="toSinglePage('agreement')">《用户协议》</text>

		</view>

		<text class="authorizedBtn" @click="handleCheckUserInfo">保存</text>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		navigateTo
	} from '@/utils/util.js'

	import {
		getUserInfo,
		updateUserInfo
	} from '@/api/index.js'
	import wCard from '@/components/w-card.vue'
	const avatarUserUrl = ref('')
	const nickName = ref('')
	const userName = ref('')
	const company = ref('')
	const duty = ref('')
	const phone = ref('')
	const readAndAgree = ref(false)

	onLoad(() => {
		let userInfo = uni.getStorageSync('userInfo') || {};
		if (userInfo) {
			avatarUserUrl.value = userInfo.headimg
			nickName.value = userInfo.nickname
			userName.value = userInfo.username
			company.value = userInfo.company
			duty.value = userInfo.duty
			phone.value = userInfo.phone
		}

	})


	const onChooseAvatar = (e) => {
		const {
			avatarUrl
		} = e.detail
		avatarUserUrl.value = avatarUrl
	}
	const handleBack = () => {
		uni.navigateBack()
	}
	const checkboxChange = () => {
		readAndAgree.value = !readAndAgree.value
	}

	const toSinglePage = (e) => {
		console.log(e);
		navigateTo({
			url: `/pages/singlePage/index?name=${e}`
		})
	}

	const handleCheckUserInfo = () => {
		if (!readAndAgree.value && avatarUserUrl.value && nickName.value) {
			return
		}
		setMineUserInfo()

	}

	const setMineUserInfo = async () => {
		let res = await updateUserInfo({
			headimg: avatarUserUrl.value,
			nickname: nickName.value,
			username: userName.value,
			company: company.value,
			duty: duty.value,
			phone: phone.value,
		})
		if (res?.code) {
			console.log("getUserInfo=>", res.data);
			getMineUserInfo()

		}
	}


	const getMineUserInfo = async () => {
		let res = await getUserInfo()
		if (res?.code) {
			console.log("getUserInfo=>", res.data);
			uni.setStorageSync("userInfo", res.data)
			handleBack()
		}
	}
</script>
<style lang="scss" scoped>
	.top-box {
		position: sticky;
		top: 0;
	}

	.page {
		display: flex;
		flex-direction: column;
	}

	.h-view {
		font-size: 30rpx;
		margin-top: 40rpx;
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	.unauthorized {
		display: flex;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		flex-direction: column;
		align-items: center;

		&:active {
			opacity: 0.7;
		}
	}

	.avatar {
		border-radius: 100%;
		overflow: hidden;
		background-color: #f5f5f5;
		height: 150rpx;
		width: 150rpx;
	}

	button {
		margin: 0;
		padding: 0;
		background-color: inherit;
		position: static;
	}

	button:after {
		content: none;
	}

	button::after {
		border: none;
	}

	.title {
		height: 90rpx;
		line-height: 90rpx;
		margin-left: 20rpx;
	}

	.authorizedBtn {
		margin-top: 70rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20rpx;
		width: 640rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: #2251A2;
		border-radius: 10rpx;
		font-size: 24rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 34rpx;

		&:active {
			opacity: 0.7;
		}
	}
</style>